<template>
	<view class="container">
		<view class="status_bar">
			<view style="margin-left: 4%;" @tap="goBack()"><u-icon name="arrow-leftward" size='24' /></u-icon></view>
			<view style="font-weight: bold;">新的朋友</view>
			<!-- <u-icon name="list-dot" size=24 style="margin-right: 4%;" color="#d54827"></u-icon> -->
			<view></view>
		</view>
		<u-tabs :list="list1" @click="clickTabs" lineColor="#fff" :inactiveStyle="{
        color: '#b5b5b5',
        transform: 'scale(1)' }"></u-tabs>
		<!-- <view class="search-box">
			<u-search placeholder="请输入您想搜索的内容" v-model="keyword" :showAction="false" searchIconColor="#373737"
				placeholderColor="#bcbcbc"></u-search>
		</view> -->
		<view class="shop-box">
			<scroll-view scroll-y class="list" v-if="type == 0">

				<template v-for="(item, index) in itemArr" style="flex:1;" @tap="toDetail(item)">

					<view class="select-box" style="display: flex; padding:0 30upx;" @tap="toDetail(item)">
						<image class="name-img1" src="../../static/image/message.png" mode="aspectFit"></image>
						<view style="flex: 1;">


							<view class="title-box">
								“{{ item.message.nickname }}”请求加您为好友
							</view>
							<view class="title-box">
								{{ item.time }}
							</view>
							<view style="margin: 45upx 0 0 20upx">
								<u-line color="#dcdcdc" length="1000%"></u-line>
							</view>
						</view>

						<view v-if="!item.message.btn_status"
							style="position: absolute;right: 4%;color: #9c9c9c; font-size: 22upx;color: #fff; background-color: #007aff;width: 80px;height: 30px;line-height: 30px;text-align: center;border-radius: 5px;">
							同意
						</view>
						<view v-else-if="item.message.btn_status && item.message.btn_status == 1"
							style="position: absolute;right: 4%;color: #9c9c9c; font-size: 22upx;">
							已同意
						</view>
						<view v-else-if="item.message.btn_status && item.message.btn_status == 2"
							style="position: absolute;right: 4%;color: #9c9c9c; font-size: 22upx;">
							已拒绝
						</view>
					</view>
				</template>
			</scroll-view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				startX: 0, // 触摸开始的X坐标
				endX: 0, // 触摸结束的X坐标
				threshold: 50, // 设置滑动多少距离后触发返回
				// 基本案列数据
				list1: [{
					name: '新的朋友',
				}, {
					name: '新的群组',
				}],
				keyword: '',
				listarr: '',

				type: 0,
				itemArr: [],

			}
		},
		onLoad() {


		},
		onShow() {
			this.selectTableData();

			this.getfriendcount();
		},
		methods: {
			clickTabs(item) {
				console.log(item, "-=-=-=")
				this.type = item.index;
			},
			toDetail(item) {
				console.log(item.message.user_uid)
				if (item.message.btn_status && (item.message.btn_status == 1 || item.message.btn_status == 2)) {
					return;
				}
				this.toPage('/pages/message/newmessageInfo?user_uid=' + item.message.user_uid + '&message_item=' + JSON
					.stringify(item));
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			touchStart(event) {
				this.startX = event.touches[0].clientX;
			},
			touchEnd(event) {
				this.endX = event.changedTouches[0].clientX;
				if (this.endX - this.startX > this.threshold) {
					// 右滑操作
					// 判断是否为第一页，避免返回到上一个应用的行为
					if (getCurrentPages().length > 1) {
						uni.navigateBack({
							delta: 1 // 返回上一页
						});
					}
				}
			},
			logout() {
				
				// uni.clearStorageSync()
				uni.MBSocketProvider.closeLocalSocket();
				uni.setStorageSync('loginInfo', {});
				uni.setStorageSync('token', '')
				uni.setStorageSync('user_uid', '')
				uni.setStorageSync('userId', '')
				uni.setStorageSync('user_level', '')
				uni.setStorageSync('nickname', '')
				uni.setStorageSync('user_avatar_file_name', '')
				uni.setStorageSync('loginInfoArr', []);
				this.toPage('/pages/login')
			},

			// 查询表数据
			async selectTableData() {

				let open = this.DB.isOpen();
				console.log("open-=-=-=-==-==-", open);
				if (open) {
					// 查询表 DB.selectTableData(表名,查询条件列名,查询条件列值)
					let where = `typeu = 7 and del_flag = 0 and to1 = '${uni.getStorageSync('user_uid')}' `;
					let order = 'ORDER BY id DESC';
					this.DB.selectTableDataNew("chat", where, order)
						.then(res => {
							console.log("contact表数据-=-=-=-==-==-", res);
							this.itemArr = [...res.map((subArr) => {

								let where = `(fp = '${subArr.fp}')`

								let data = `is_read = 1`;
								this.DB.updateTableData("chat", data, where)
									.then(res => {

									})
									.catch(error => {
										console.log("修改失败", error);
									});


								let nicknamehashMap = uni.getStorageSync('nicknamehashMap');
								let avatarhashMap = uni.getStorageSync('avatarhashMap');



								let nickname = '';
								let avatar = '';
								if (nicknamehashMap) {
									nicknamehashMap = new Map(JSON.parse(nicknamehashMap));
									nickname = nicknamehashMap.get(subArr.from1) ?? '';
								}
								if (avatarhashMap) {
									avatarhashMap = new Map(JSON.parse(avatarhashMap));
									avatar = avatarhashMap.get(subArr.from1) ?? '';
								}
								console.log(subArr);
								console.log(subArr.dataContent);
								let dataContent = JSON.parse(subArr.dataContent)
								console.log(dataContent);

								return {
									user_uid: subArr.from1,
									nickname: nickname,
									status: '',
									message: dataContent, // subArr.dataContent,
									time: subArr.time,
									timestamp: '',
									relatedId: subArr.from1,
									flag: 0,
									count: 0,
									fp: subArr.fp,
									g_id: subArr.gid,
									g_name: '',
									extra3: '',
									typeu: subArr.typeu,
								};
							})];



							console.log(this.itemArr);
						}).catch(error => {
							console.log("查询失败", error);
							// this.createTable();
							if (error.code == '-1404') {
								// this.createTable();
							}

						});
				} else {
					// this.$util.toast("数据库未打开");
					this.DB.openSqlite()
						.then(res => {
							console.log("数据库已打开");
						})
						.catch(error => {
							console.log("数据库开启失败");
						});
				}
			},

			getfriendcount() {

				const requestData = {
					"processorId": '1008',
					"jobDispatchId": '4',
					"actionId": '9',
					"newData": uni.getStorageSync('user_uid')
				};
				const requestDataJsonStr = JSON.stringify(requestData);
				uni.request({
					url: 'http://chat.zwsmcn.com:8090/rest_post',
					header: {
						'content-type': 'application/json'
					},
					data: requestDataJsonStr,
					method: 'POST',
					success: res => {
						console.log(res)
						console.log(JSON.parse(res.data.returnValue))
						uni.hideLoading()

					},
					fail: res => {
						console.log(res);
					}
				});
			},
			click(item) {
				// 获取群聊
				console.log(item.index)
				let num = item.index
				if (num == 1) {
					var requestData = {
						"processorId": '1008',
						"jobDispatchId": '4',
						"actionId": '9',
						"token": '23123',
						"newData": uni.getStorageSync("user_uid")
					};
					const requestDataJsonStr = JSON.stringify(requestData);
					uni.request({
						url: 'http://chat.zwsmcn.com:8090/rest_post',
						header: {
							'content-type': 'application/json'
						},
						data: requestDataJsonStr,
						method: 'POST',
						success: res => {
							this.listarr = JSON.parse(res.data.returnValue);
							// this.listarr = updateInfoStr;
							// this.listarr = updateInfoObj
							// console.log(this.listarr.length)
							// console.log(this.listarr)
						},
						fail: res => {
							console.log(res);
						}
					});
				}
				if (num == 0) {
					var requestData = {
						"processorId": '1008',
						"jobDispatchId": '4',
						"actionId": '7',
						"token": '23123',
						"newData": uni.getStorageSync("user_uid")
					};
					const requestDataJsonStr = JSON.stringify(requestData);
					uni.request({
						url: 'http://chat.zwsmcn.com:8090/rest_post',
						header: {
							'content-type': 'application/json'
						},
						data: requestDataJsonStr,
						method: 'POST',
						success: res => {
							console.log(JSON.parse(res.data.returnValue))
							this.listarr = JSON.parse(res.data.returnValue);
							// this.listarr = updateInfoStr;
							// this.listarr = updateInfoObj
							// console.log(this.listarr.length)
							// console.log(this.listarr)
						},
						fail: res => {
							console.log(res);
						}
					});
				}


			},
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.status_bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 74upx;
	}

	.status_bar,
	.head {
		background-color: #fff;
		height: 120upx;

		.face {
			width: 160upx;
			height: 160upx;
			border-radius: 10upx;
		}

		.info-name {
			font-size: 40upx;
			font-weight: bold;
		}

		.info-num {
			// width: 56upx;
			padding: 2upx 30upx;
			background: #f0f4f7;
			border-radius: 30upx;
			margin-top: 21upx;
		}

		.copybtns {
			color: #4457a4;
			margin-top: 21upx;
		}
	}

	::v-deep.u-tabs__wrapper__nav {
		justify-content: space-around;
		border-bottom: #cbcbcb solid 2upx;
	}


	.shop-box {
		width: 100%;
		height: 36%;

		// background-color: #f8f9fb;
		margin-top: 20upx;
		border-radius: 20upx;
		padding: 10upx 20upx;
		color: #2e2e2e;
		font-weight: 300;

		image {
			width: 70upx;
			height: 70upx;
			padding: 10upx 28upx 0upx 10upx;

		}
	}

	.search-box {
		width: 92%;
		margin-left: 4%;
		margin-top: 30upx;
	}

	.list {
		height: calc(100vh - 350upx);

		.item {
			width: 100vw;
			padding: 20upx 30upx 0;
			box-sizing: border-box;

			.cover {
				width: 80upx;
				height: 80upx;
				border-radius: 10upx;
				box-sizing: border-box;
				border: 2upx solid #f9f9f9;
				position: relative;

				.icon {
					width: 100%;
					height: 100%;
					border-radius: 10upx;
				}
			}

			.title {
				height: 100%;
				box-sizing: border-box;
				width: calc(100vw - 110upx - 60upx);
				position: relative;

				&::after {
					content: '';
					width: 100%;
					height: 2upx;
					background-color: #F6F6F6;
					position: absolute;
					left: 0;
					bottom: -34upx;
				}

				.main {
					margin: 6upx 0;

					.text {
						color: #333;
						font-size: 32upx;
						font-weight: 600;
					}

					.time {
						color: #666;
						font-size: 24upx;
					}
				}
			}
		}
	}
</style>